<template>
  <div id="app">
    <div class="container">
      <Input v-model="inputText" type="textarea" placeholder="Enter something..." :rows="10" />
      <Button type="success" long @click="test" class="mt">确定</Button>
      <!-- <Button type="success" long @click="test2" class="mt">确定2</Button> -->
    </div>
    <div style="display: flex; flex-wrap: wrap;">
      <div class="page" v-html="formatHtml(inputText)"></div>
      <div class="page" v-html="inputHTML" id="ttt"></div>
      <div class="page">
        <span v-for="(line,i) in lines" :key="i" :style="{'text-indent': i===0?'2em':'0px'}" class="line">{{ line }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { MyWordBreak } from '../../libs/MyWordBreak'
import TextMeasure from '../../libs/TextMeasure'
let measure

export default {
  name: 'App',
  data: function () {
    return {
      inputText: '',
      lines: [],
      pageSize: {
        width: 600,
        height: 800,
        padding: 64
      }
    }
  },
  computed: {
    inputHTML: function () {
      let result = ''
      for (let i = 0; i < this.inputText.length; i++) {
        result += '<span>' + this.inputText[i] + '</span>'
      }
      return result
    }
  },
  created () {
    measure = new TextMeasure()
    let str = '。？！，、；：“”（）—…《》￥【】〔〕０『』「」'
    for (let i = 0; i < str.length; i++) {
      console.log(str[i] + ' : ' + str[i].charCodeAt())
    }
  },
  mounted () {
  },
  methods: {
    test: function () {
      measure.setWidth(this.pageSize.width - this.pageSize.padding * 2)
      measure.setFontSize(16)

      let words = MyWordBreak(this.inputText, {lineBreak: 'strict', wordBreak: 'normal'})
      let lines = [] // { content: "", flag: "fst|mid|lst|bl" } 
      let line = ''
      for (let i = 0; i < words.length; i++) {
        if (words[i].indexOf('\n').length>-1) {
          lines.push(line)
          line = words[i]
        }
        if (measure.testOutLine(line + words[i], lines.length === 0)) {
          lines.push(line)
          line = words[i]
        } else {
          line += words[i]
        }
      }
      if (line) {
        lines.push(line)
      }

      this.lines = lines
    },
    formatHtml: function (content) {
      return content.replaceAll('\n','<br>')
    },
    test2: function () {

    }
  }
}
</script>

<style>
#app {
  background-color: #eee;
  min-height: 100vh;
}
.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 1em;
}
.page {
  width: 600px;
  height: 800px;
  padding: 64px;
  background-color: white;
  margin: 8px;
  font-size: 16px;
  /* font-family: 微软雅黑; */
  text-align: justify;
  border-radius: 8px;
}
.mt { margin-top: 8px; }
.line { text-align-last: justify; display: block; }
</style>
